<template>
  <div id="login">
    <el-input id="username" v-model="form.phone" placeholder="请输入用户名"></el-input
    ><br />
    <el-input v-model="form.psd" show-password placeholder="请输入密码"></el-input
    ><br />
    <el-button id="loginBtn" type="success" @click="login" plain
      >登录</el-button
    >
    <el-button id="czBtn" type="warning" plain>重置</el-button>
    <el-link id='linkBtn' @click="register" type="primary" underline>注册账号</el-link>
  </div>
</template>

<script>
import network from "@/network";
export default {
  data() {
    return {
      form: {
        phone: "",
        psd: "",
      },
    };
  },
  methods: {
    async login() {
      let res = await network({
        method: "post",
        url: "/users/login",
        data: this.form,
      });
      if (res.code == 200) {
        alert("登录成功！");
        localStorage.setItem("phone", this.form.phone);
        localStorage.setItem("token",res.token);

        this.$router.push("/");
      } else {
        alert(res.msg);
      }
    },
    register(){
        this.$router.push("/register");
    }
  },
};
</script>

<style lang="scss">
#login {
  width: 300px;
  margin: 0 auto;
  > button {
    margin-top: 5px;
  }
  #linkBtn{
      margin-left: 10px;
  }
}
</style>